<template>
  <el-menu
    mode="vertical"
    class="el-menu-vertical-demo"
    :default-active="currentActive"
    @select="menuSelected"
    unique-opened
  >
    <el-menu-item-group>
      <el-menu-item v-for="menu in menus" :index="menu.path" :key="menu.path">
        <span>{{ menu.title }}</span>
      </el-menu-item>
    </el-menu-item-group>
  </el-menu>
</template>
<script>
export default {
  data() {
    return {
      currentActive: ''
    }
  },
  props: {
    menus: {
      type: Array,
      default: function() {
        return []
      }
    },
    title: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    }
  },
  methods: {
    menuSelected(index) {
      this.currentActive = index
      this.$router.push(index)
    },
    changeCurrentActive(currentPath) {
      let navMenu = this.menus.find((item, index) => {
        if (index === 0) {
          return false
        }
        return currentPath.includes(item.path)
      })
      if (navMenu === undefined) {
        this.currentActive = this.url
      } else {
        this.currentActive = navMenu.path
      }
    }
  },
  mounted() {
    this.changeCurrentActive(this.$route.path)
  },
  watch: {
    $route(to) {
      if (this.currentActive !== to.path) {
        this.changeCurrentActive(to.path)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.content-text {
  width: 780px;
  line-height: 18px;
}
</style>
